<template>
    <view id="view_warper" ref="pdfDom" :class="{ pdf_download: pdfDownload }" style="page-break-after: always"
        class="view_warper cardBg">

        <view ref="time" class="inquiry-number-times">
            <view> 第 <text>{{ formData.time || "--" }}</text> 次询问</view>
        </view>
        <view class="inquiry-title">询问笔录</view>
        <view class="inquiry-time-wrap">
            <text>询问时间</text>
            <view style="flex:1;display: inline;" ref="startTime">
                <FormatInquiryTime style="width:100%" :date="formData.startTime" />
            </view>
            <text>至</text>
            <view style="flex:1;display: inline;">
                <FormatInquiryTime :date="formData.endTime" />
            </view>
        </view>
        <view class="inquiry-wrap">
            <view class="inquiry-label"><text>询问地点</text></view>
            <view class="content"><text>{{ formatAddress }}</text></view>
        </view>
        <view class="inquiry-person-item">
            <view class="inquiry-wrap">
                <view class="inquiry-label"><text>询问人 (签名)</text></view>
                <view class="content"><text>{{ formData.inquirytor }}</text></view>
            </view>
            <view class="inquiry-wrap">
                <view class="inquiry-label"><text>工作单位</text></view>
                <view class="content"> <text> {{ formData.inquirytorOrg }}</text></view>
            </view>
            <!-- <view class="inquiry-label" style="display: inline;"><text>询问人 (签名)</text></view>
            <view class="content" ref="inquirytorName" style="display: inline;text-decoration: underline;">
                <text> {{ formData.inquirytor }}</text>
            </view>
            <view class="inquiry-label" style="display: inline;"><text>工作单位</text></view>
            <view class="content" ref="inquirytorOrg" style="display: inline;text-decoration: underline;">
                <text> {{ formData.inquirytorOrg }}浙江省杭州市滨江消防大队、浙江省杭州市萧山消防大队</text>
            </view> -->
        </view>
        <view class="inquiry-person-item">
            <view class="inquiry-wrap">
                <view class="inquiry-label"><text>记录人 (签名)</text></view>
                <view class="content"><text>{{ formData.recordtor }}</text></view>
            </view>
            <view class="inquiry-wrap">
                <view class="inquiry-label"><text>工作单位</text></view>
                <view class="content"> <text> {{ formData.recordtorOrg }}</text> </view>
            </view>
        </view>
        <view class="inquiry-date-item">
            <view class="inquiry-wrap" :class="!formData.reInquirytorName ? 'inquiry-none-content' : ''">
                <view class="inquiry-label"><text>被询问人</text></view>
                <view class="content" ref="reInquirytorName"><text>{{ formData.reInquirytorName || "" }}</text> </view>
            </view>
            <view class="inquiry-wrap" :class="!formData.reInquirytorSex ? 'inquiry-none-content' : ''">
                <view class="inquiry-label"><text>性别</text></view>
                <view class="content" ref="reInquirytorSex">{{ INQUIRYSEX_NAMES[formData.reInquirytorSex] || "" }}</view>
            </view>
            <view class="inquiry-wrap" :class="!formData.reInquirytorAge ? 'inquiry-none-content' : ''">
                <view class="inquiry-label"><text>年龄</text></view>
                <view class="content" ref="reInquirytorSex">{{ formData.reInquirytorAge || "" }}</view>
            </view>
            <view class="inquiry-wrap" :class="!formData.reInquirytorBirth ? 'inquiry-none-content' : ''">
                <view class="inquiry-label">出生日期</view>
                <view class="content" ref="reInquirytorBirth">
                    {{ parseTime(formData.reInquirytorBirth, "{y}年{m}月{d}日") || "" }}
                </view>
            </view>

        </view>
        <view class="inquiry-card-item">
            <view class="inquiry-wrap"
                :class="!formData.reInquirytorCardType || !formData.reInquirytorCardNum ? 'inquiry-none-content' : ''">
                <view class="inquiry-label">身份证件种类及号码 </view>
                <view class="content">
                    <text ref="reInquirytorCardType"> {{ INQUIRYCARD_NAMES[formData.reInquirytorCardType] || "" }} </text>
                    <text ref="reInquirytorCardNum"> {{ formData.reInquirytorCardNum || "" }} </text>
                </view>
            </view>
            <view class="inquiry-wrap" :class="!formData.reInquirytorIsNpc ? 'inquiry-none-content' : ''">
                <view style="margin-right: 6rpx;">
                    <text class="iconfont"> {{ formData.reInquirytorIsNpc == 1 ? '&#xe63c;' : '&#xe690;' }}是 </text>

                    <text class="iconfont"> {{ formData.reInquirytorIsNpc === 0 ? '&#xe63c;' : '&#xe690;' }}否 </text>
                </view>
                <view class="inquiry-label"><text>人大代表</text></view>
            </view>
        </view>
        <view class="inquiry-address-item">
            <view class="inquiry-wrap" :class="!formData.reInquirytorAddressNow ? 'inquiry-none-content' : ''">
                <view class="inquiry-label">现住址</view>
                <view class="content" ref="reInquirytorAddressNow"><text>{{ formData.reInquirytorAddressNow || "" }}</text>
                </view>
            </view>
            <view class="inquiry-wrap" :class="!formData.reInquirytorPhone ? 'inquiry-none-content' : ''">
                <view class="inquiry-label">联系方式</view>
                <view class="content"><text>{{ formData.reInquirytorPhone || "" }}</text></view>
            </view>
        </view>
        <view class="inquiry-wrap">
            <view>户籍所在地 </view>
            <view class="content" ref="reInquirytorAddressOld"><text>{{ formData.reInquirytorAddressOld || "" }}</text>
            </view>
        </view>
        <view style="line-height: 2.2;color: initial;">
            (<text style="display: line;" ref="reInquirytorGoType">
                <text>{{ INQUIRYGO_NAMES[formData.reInquirytorGoType] }}</text>
            </text>
            <text style="display: line;">的被询问人</text>
            <view style="display: inline;vertical-align: top">
                <FormatInquiryTime v-if="formData.reInquirytorStartTime" :date="formData.reInquirytorStartTime"
                    pattern="{m},{d},{h},{i}" />
            </view>
            <text style="display: line;"> 到达，</text>
            <view style="display: inline;vertical-align: top;">
                <FormatInquiryTime v-if="formData.reInquirytorEndTime" :date="formData.reInquirytorEndTime"
                    pattern="{m},{d},{h},{i}" />
            </view>
            <text style="display: line;"> 离开， 本人签名确认</text>
            <img class="content" v-if="formData.reInquirytorSignature" ref="reInquirytorSignature"
                :src="formData.reInquirytorSignature" height="40" width="60" alt="" srcset="" />
            <text v-else style="width: 60rpx;display: inline-block;"></text>)
        </view>
        <view class="item item-record" v-html="formData.contentRender"></view>
        <view v-show="showObj.show" ref="myView" class="text-box" :style="{ left: showObj.x + 'px', top: showObj.y + 'px' }"
            style="position: absolute;">{{ showObj.text }}</view>
    </view>
</template>

<script>
import { checkType } from '@/utils/index';
import { INQUIRYGO_NAMES, INQUIRYSEX_NAMES, INQUIRYCARD_NAMES, INQUIRYNPC_NAMES } from '@/const/archives/penrecord.js'
import FormatInquiryTime from '@/pagesH5/components/FormatInquiryTime/index.vue'
export default {
    components: { FormatInquiryTime },
    props: {
        formData: {
            type: Object,
            default: () => ({ startTime: new Date(), endTime: newDate() })
        },
        pdfDownload: {
            type: Boolean,
            default: false
        }
    },
	mounted(){
	},
    data() {
        return {
            INQUIRYGO_NAMES, INQUIRYSEX_NAMES, INQUIRYCARD_NAMES, INQUIRYNPC_NAMES,
            showObj: {
                show: false,
                x: undefined, y: undefined, text: undefined
            }
        }
    },
    computed: {
        formatInquirytorList() {
            let inquirytorNames = this.formData.inquirytorName
            if (!inquirytorNames || !inquirytorNames.length) return [];
            const inquirytor = inquirytorNames?.split(',');
            return inquirytor
        },
        formatInquirytorName() {
            return (val, index) => {
                return val.split('-')[index] || ''
            };
        },
        formatAddress() {
            let address = this.formData.address;
            if (!address || !address.length) return '';
            if (checkType(address) === 'string') {
                return address.split(',')[2]
            } else if (checkType(address) === 'array') {
                return address[2];
            }
        }
    },
    methods: {
        changeFormData(data) {
            this.formData = data
            this.$set(this, 'formData', data)
            this.$forceUpdate()
        },
    }
}
</script>

<style scoped lang="scss">
.view_warper {
    color: #000;
    font-size: 32rpx;
    overflow-y: auto;
    padding-bottom: 140rpx;

    /* 垂直重复显示 */
    &.pdf_download {
        padding: 127rpx 158rpx;
        font-size: 44rpx;
    }

    &.cardBg {
        background-color: #fff;
        padding-left: 20rpx;
        padding-right: 50rpx;
    }

    .inquiry-number-times {
        text-align: right;
    }

    .inquiry-title {
        text-align: center;
        font-weight: bold;
        font-size: 50rpx;
    }

    .inquiry-wrap {
        line-height: 2.2;
        font-size: initial;
        clear: both;
        display: flex;
        overflow: hidden;

        & .inquiry-label {
            float: left;
        }

        .content {
            position: relative;
            flex: 1;
            text-decoration: underline;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            &>text {
                padding-left: 6rpx;
            }

            &::after {
                content: '';
                width: 100%;
                display: block;
                border-bottom: 2rpx solid #000;
                position: absolute;
                bottom: 18rpx;
            }

        }

        &.inquiry-none-content {
            display: flex;

            .content {
                &::after {
                    content: '';
                    width: 100%;
                    display: block;
                    border-bottom: 2rpx solid #000;
                    position: absolute;
                    bottom: 18rpx;
                }
            }
        }
    }

    .inquiry-time-wrap {
        .content {
            display: flex;

            &::after {
                border: none;
            }
        }
    }

    .inquiry-person-item {
        display: flex;

        .inquiry-wrap {
            flex: 1.5;

            &:last-child {
                flex: 2;
            }

            .content {
                flex: 1;
                position: relative;
            }
        }
    }

    .inquiry-date-item {
        display: flex;

        .inquiry-wrap {
            &:nth-child(1) {
                flex: 2.1;
            }

            &:nth-child(2) {
                flex: 1;
            }

            &:nth-child(3) {
                flex: 1;
            }

            &:nth-child(4) {
                flex: 2.5;
            }
        }
    }

    .inquiry-card-item {
        display: flex;

        .inquiry-wrap {
            &:nth-child(1) {
                flex: 3;
            }

            &:nth-child(2) {
                flex: 1.2;
                justify-content: flex-end;
            }
        }
    }

    .inquiry-address-item {
        display: flex;

        .inquiry-wrap {
            &:nth-child(1) {
                flex: 2;
            }

            &:nth-child(2) {
                flex: 1.5;
            }
        }
    }

    text {
        margin: 0;
        line-height: 46rpx;
    }

    &>text {
        line-height: 68rpx;
    }


    img {
        vertical-align: middle;
        height: 50rpx;
    }
}

.text-box {
    background-color: #fff;
    border: 2rpx solid #000;
    border-radius: 8rpx;
    padding: 6rpx 10rpx;
}
</style>